<template>
  <div class="dashboard-editor-container">
    <panel-group />
    
    <div class="chart-wrapper">
      <h2 class="vm-title">虚拟机状态分布</h2>
      <vm-pie-chart :chart-data="vmpieChartData"/>
    </div>
    
    <el-row :gutter="100">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <res-pie-chart :chart-data="pieChartData1"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <res-pie-chart :chart-data="pieChartData2"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <res-pie-chart :chart-data="pieChartData3"/>
        </div>
      </el-col>
    </el-row>
    
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import resPieChart from './components/resPieChart'
import vmPieChart from './components/vmPieChart'

const pieChartData = [
  {
  resourceType:  'vCPU',
  data: [3,2],
  },{
  resourceType:  '内存',
  data: [13,12],
  },{
  resourceType:  '磁盘',
  data: [3,12],
  },
]
const vmpieChartData = {
  shut_down:4,
  hang_up:1,
  running:2,
}

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    resPieChart,
    vmPieChart,
  },
  data() {
    return {
      pieChartData1 : pieChartData[0],
      pieChartData2 : pieChartData[1],
      pieChartData3 : pieChartData[2],
      vmpieChartData: vmpieChartData,
    }
  },
  created(){
    this.$store.dispatch('user/getNum')
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fffef9;
    padding: 6px;
    margin-top: 32px;
    .vm-title{
      text-align: center;
      color: royalblue;
    }
  }
}
</style>
